<template>
    <div class="page">
        <div class="search-view" style="display: none;">
            <Input v-model="search.name" clearable placeholder="请输入" style="width: 150px;margin-right:10px;" />
            <Button 
                class="action-btn"
                icon="ios-search" 
                type="primary" 
                :loading="listData.isLoading"
                @click="onClickSearch">查询
            </Button>
            <!-- <Button 
                class="action-btn" 
                type="primary"
                @click="onClickClearSearch">清空
            </Button> -->
        </div>
        <div class="content-view">
            <CircleInfoDetailUserListView
                :data="listData"
                @on-action="onActionRow">
            </CircleInfoDetailUserListView>
        </div>
        <div class="page-view">
            <Page
                show-elevator
                show-sizer
                show-total
                :current="pageData.currentPage+1" 
                :page-size="pageData.pageSize"
                :total="pageData.totalSize"
                @on-change="changePage"
                @on-page-size-change="changePagesize">
            </Page>
        </div>
    </div>
</template>
<script>
import CircleInfoDetailUserListView from './CircleInfoDetailUserListView'

import circleService from '@/network/service/CircleService.js'

import filterTime from '@/filters/filterTime.js'

export default {
    name: 'CircleInfoDetailUserView.vue',
    components: {
        CircleInfoDetailUserListView,
    },
    props: ['circleId'],
    data() {
        return {
            search: {
                name: null
            },
            pageData: {
                currentPage: 0,
                pageSize: 20,
                totalSize: 0,
            },
            listData: {
                isLoading: false,
                data: []
            },
        }
    },
    mounted(){
    },
    watch: {
        circleId(val,old) {
            if(val != null){
                this.getDataList();
            }
        }
    },
    methods: {
        onClickSearch() {
            this.getDataList();
        },
        onClickClearSearch() {
            this.search.name = null;
        },
        changePage(page) {
            this.pageData.currentPage = page-1;
            this.getDataList();
        },
        changePagesize(pagesize){
            this.pageData.pageSize=pagesize;
            this.getDataList();
        },
        getDataList() {
            this.listData.isLoading = true;
            let that = this;
            circleService.getCircleUserList(this.pageData.currentPage, this.pageData.pageSize, this.circleId).then(res => {
                let result = res.data;
                let code = result.rescode;
                that.listData.isLoading = false;
                if (code == 100) {
                    that.listData.data=result.data;
                    that.pageData.totalSize = result.totalSize;
                }else {
                    console.log(result.msg);
                }
            }, error => {
                that.listData.isLoading = false;
                that.$exception.netError(error);
            });
        },
        // 行操作点击
        onActionRow(obj){
            if(obj!=null){
                let action = obj.action;
                let params = obj.params;
                // params 包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引
                switch(action){
                    case 'detail':
                        this.$router.push({ name: 'CarDetail', query: { id: params.row.id }});
                    break;
                    break;
                }
            }
        },
    },
}
</script>
<style lang="less" scoped>
.page {
    .search-view {
        margin-bottom: 5px;
        .action-btn {
            margin-right: 10px;
        }
    }
    .content-view {
        
    }
    .page-view {
        text-align: center;
        padding: 5px;
        border-radius: 4px;
        background-color: #fff;
        margin-top: 10px;
    }
}
</style>